<!-- 数字键盘的组件 -->
<template>
  <div>
    <div class="numberKeyboard-box">
      <div class="line-one">
        <button class="line-one-item" @click="inputKeyboard('1')">1</button>
        <button class="line-one-item" @click="inputKeyboard('2')">2</button>
        <button class="line-one-item" @click="inputKeyboard('3')">3</button>
        <div class="delete-btn" @click="handleDelete">
          <el-icon class="delete-icon">
            <Delete />
          </el-icon>
        </div>
      </div>
      <div class="line-two">
        <button class="line-two-item" @click="inputKeyboard('4')">4</button>
        <button class="line-two-item" @click="inputKeyboard('5')">5</button>
        <button class="line-two-item" @click="inputKeyboard('6')">6</button>
        <button class="cancel-btn" @click="handleCancel">{{ cancelText }}</button>
      </div>
      <div class="line-three">
        <div class="line-three-left">
          <div class="top">
            <button class="line-three-item" @click="inputKeyboard('7')">7</button>
            <button class="line-three-item" @click="inputKeyboard('8')">8</button>
            <button class="line-three-item" @click="inputKeyboard('9')">9</button>
          </div>
          <div class="bottom">
            <button
              class="line-three-item"
              :class="{ disabled: disabledDecimal }"
              @click="inputKeyboard('.')"
              :disabled="disabledDecimal"
            >
              .
            </button>
            <button class="line-three-item" @click="inputKeyboard('0')">0</button>
            <button class="line-three-item" @click="inputKeyboard('00')">00</button>
          </div>
        </div>
        <el-button
          class="line-three-right"
          @click="handleConfirm"
          :loading="loading"
          :disabled="loading"
        >
          {{ loading ? '确认中...' : confirmText }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { throttle } from '@/utils/toolsValidate'

interface Props {
  keyword: string
  cancelText?: string
  confirmText?: string
  isFirstZero?: boolean
  showRadixPoint?: boolean
  maxStrLimit?: number
  loading?: boolean
  disabledDecimal?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  keyword: '',
  cancelText: '取消',
  confirmText: '确定',
  isFirstZero: true,
  showRadixPoint: true,
  maxStrLimit: 15,
  loading: false,
  disabledDecimal: false
})

const emit = defineEmits<{
  'update:keyword': [value: string]
  onInputKeyboard: [value: string]
  onCancel: []
  onConfirm: []
}>()

const keywordList = ref<string[]>([])

// 创建节流的确认方法 - 3秒内只执行一次，防止重复点击
const throttledConfirm = throttle(() => {
  emit('onConfirm')
}, 3000)

const keywordString = computed({
  get() {
    return props.keyword
  },
  set(val: string) {
    emit('update:keyword', val)
  }
})

// 数字检查函数
function NumberCheck(val: string): string {
  const pattern = /^[0-9.]*$/
  return pattern.test(val) ? val : ''
}

// 去除字符串里面的符号"."
function removeRadixPoint(str: string): string {
  const pattern = /\./g
  return str.replace(pattern, '')
}

// 监听从输入框传递过来的数据
watch(
  () => props.keyword,
  val => {
    // 限制输入数量
    if (val.length > props.maxStrLimit) {
      emit('update:keyword', val.slice(0, props.maxStrLimit))
      return
    }
    // 输入的第一位不能是0
    if (!props.isFirstZero) {
      if (val === '0' || val === '00') {
        emit('update:keyword', '')
        return
      }
    }
    // 输入的第一位不能是.符号
    if (val === '.') {
      emit('update:keyword', '')
      return
    }
    // 限制只能输入数字和一个小数点
    let str = NumberCheck(val)
    // 去除字符串里面的符号"."
    if (!props.showRadixPoint) {
      str = removeRadixPoint(str)
    }
    if (str) {
      // 字符串转数组
      keywordList.value = [...str]
      emit('onInputKeyboard', str)
    } else {
      emit('update:keyword', '')
      keywordList.value = []
    }
  }
)

// 点击键盘输入
function inputKeyboard(val: string) {
  // 限制输入数量
  if (keywordString.value.length > props.maxStrLimit) return
  // 输入的第一位不能是0
  if (!props.isFirstZero && keywordString.value.length === 0) {
    if (val === '0' || val === '00') return
  }
  // 输入的第一位不能是.符号
  if (val === '.' && keywordString.value.length === 0) return
  // 如果禁用小数点，直接返回
  if (val === '.' && props.disabledDecimal) return
  // 只能输入一个小数点，且只能输入两位小数
  if (props.keyword && props.keyword.includes('.') && val === '.') return
  // 只保留两位小数
  if (keywordList.value.length && /\d+[.]\d{2}/g.test(keywordList.value.join(''))) return
  keywordList.value.push(val)
  let keywordStr = keywordList.value.join('')
  // 去除字符串里面的符号"."
  if (!props.showRadixPoint) {
    keywordStr = removeRadixPoint(keywordStr)
  }
  emit('update:keyword', keywordStr)
}

// 取消
function handleCancel() {
  keywordList.value = []
  emit('update:keyword', '')
  emit('onInputKeyboard', '')
  emit('onCancel')
}

// 确认 - 使用节流防止多次点击
function handleConfirm() {
  if (!props.loading) {
    throttledConfirm()
  }
}

// 从数组的最后一位开始进行删除
function handleDelete() {
  if (keywordList.value.length) {
    keywordList.value.pop()
    const keywordStr = keywordList.value.join('')
    emit('update:keyword', keywordStr)
  }
}
</script>

<style scoped lang="scss">
.numberKeyboard-box {
  width: 100%;
  max-width: 516px;
  box-sizing: border-box;
  margin: 0 auto;

  .line-one {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .line-one-item {
      width: 120px;
      height: 62px;
      line-height: 62px;
      background: #f4f4f4;
      border-radius: 6px;
      font-size: 24px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #333333;
      cursor: pointer;
      border: none;
      outline: none;
      transition: all 0.3s ease;

      &:hover {
        background: #7c0a03;
        color: #ffffff;
      }
    }
    .delete-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 62px;
      background: #f4f4f4;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #7c0a03;
        .delete-icon {
          color: #ffffff;
        }
      }

      .delete-icon {
        flex-shrink: 0;
        width: 40px;
        height: 30px;
        color: #333;
        transition: color 0.3s ease;
      }
    }
  }
  .line-two {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    .line-two-item {
      width: 120px;
      height: 62px;
      line-height: 62px;
      background: #f4f4f4;
      border-radius: 6px;
      font-size: 24px;
      font-family:
        PingFang SC,
        PingFang SC-Bold;
      font-weight: 700;
      text-align: center;
      color: #333333;
      cursor: pointer;
      border: none;
      outline: none;
      transition: all 0.3s ease;

      &:hover {
        background: #7c0a03;
        color: #ffffff;
      }
    }
    .cancel-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 62px;
      background: #f4f4f4;
      border-radius: 6px;
      cursor: pointer;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #999999;
      border: none;
      outline: none;
      transition: all 0.3s ease;

      &:hover {
        background: #7c0a03;
        color: #ffffff;
      }
    }
  }
  .line-three {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    .line-three-left {
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .line-three-item {
          width: 120px;
          height: 62px;
          line-height: 62px;
          background: #f4f4f4;
          border-radius: 6px;
          font-size: 24px;
          font-family:
            PingFang SC,
            PingFang SC-Bold;
          font-weight: 700;
          text-align: center;
          color: #333333;
          cursor: pointer;
          margin-right: 12px;
          border: none;
          outline: none;
          transition: all 0.3s ease;

          &:hover {
            background: #7c0a03;
            color: #ffffff;
          }
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12px;
        .line-three-item {
          width: 120px;
          height: 62px;
          line-height: 62px;
          background: #f4f4f4;
          border-radius: 6px;
          font-size: 24px;
          font-family:
            PingFang SC,
            PingFang SC-Bold;
          font-weight: 700;
          text-align: center;
          color: #333333;
          cursor: pointer;
          margin-right: 12px;
          border: none;
          outline: none;
          transition: all 0.3s ease;

          &:hover:not(:disabled) {
            background: #7c0a03;
            color: #ffffff;
          }

          &.disabled,
          &:disabled {
            background: #e0e0e0;
            color: #999999;
            cursor: not-allowed;
          }
        }
      }
    }
    .line-three-right {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 138px;
      background: #7c0a03;
      border-radius: 12px;
      font-size: 18px;
      font-family:
        PingFang SC,
        PingFang SC-Regular;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      border: none;
      outline: none;
      transition: all 0.3s ease;

      &:hover:not(:disabled) {
        background: #5a0702;
      }

      &:disabled {
        background: #ccc;
        cursor: not-allowed;
      }

      // Element Plus 样式覆盖
      :deep(.el-button) {
        width: 100%;
        height: 100%;
        background: #7c0a03;
        border: none;
        border-radius: 12px;
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        font-weight: 400;
        color: #ffffff;

        &:hover:not(:disabled) {
          background: #5a0702;
        }

        &:disabled {
          background: #ccc;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .numberKeyboard-box {
    max-width: 400px;

    .line-one,
    .line-two,
    .line-three {
      .line-one-item,
      .line-two-item,
      .line-three-item,
      .delete-btn,
      .cancel-btn {
        width: 90px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
      }

      .line-three-right {
        width: 90px;
        height: 112px;
        font-size: 16px;
      }
    }
  }
}
</style>
